<template>
  <div class="outcomesUploadList">
    <pageTitle :data="titleData" :showCourseName="isEdit" />
    <flexBox v-if="!isEdit" 
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
      <courseCard
        :data="item"
        v-for="(item, index) in data"
        :key="index"
        slot
        @click.native="handleClickCard(item)"
      />
      <div class="fullCar" v-if="data.length % 3 == 2" />
      <div v-if="!data.length">暂无学业</div>
    </flexBox>
    <OUTCOMESUPLOADFILE v-else :currSelctStuShow="currSelctStuShow" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import regAgreementVue from "../../register/regAgreement.vue";
const pageTitle = () => import("@/views/user/user/component/pageTitle");
const courseCard = () => import("@/views/user/user/component/courseCard");
const flexBox = () => import("@/views/user/user/component/flexBox");
const OUTCOMESUPLOADFILE = () =>
  import("@/views/user/user/stuOutcomes/outcomesUploadFile");
export default {
  components: {
    pageTitle,
    courseCard,
    flexBox,
    OUTCOMESUPLOADFILE,
  },
  data() {
    return {
      titleData: {
        name: "学业上传",
      },
      isEdit: false, // 是否正在编辑学业目录
      data: [],
      currSelctStuShow: {},
      loading: false
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  watch: {
    $route(n) {
      this.getIsEditNewState();
    },
    "$store.state.courses.chooseCourses"(n) {
      this.getStuShowCourse();
    },
    "$store.state.stuShow.stuShowList"(n) {
      const { currNo, type, stuworkshowID, pageName } = this.$route.query
      if (pageName == "oUpload" && currNo && stuworkshowID && type == "edit") {
        const findStuShow = n.find(item => item.stuworkshowID == stuworkshowID)
        if (findStuShow) this.currSelctStuShow = findStuShow
      }
    }
  },
  created() {
    this.getStuShowCourse();
  },
  methods: {
    handleClickCard(item) {
      this.currSelctStuShow = item
      const { path, query } = this.$route;
      if (!item.stuShowData.stuworkshowID || !item.currNo) {
        return this.$antdMessage({
          content: `缺少${!item.stuShowData.stuworkshowID? 'stuworkshowID':'currNo'}参数`
        })
      }
      this.$router.push({
        path: path,
        query: { pageName: query.pageName, currNo: item.currNo, type: "edit", stuworkshowID: item.stuShowData.stuworkshowID},
      });
    },
    getIsEditNewState() {
      const { query } = this.$route;
      this.isEdit = query.type === "edit" && query.currNo ? true : false;
    },
    // 获取创建了学业的课程
    async getStuShowCourse() {
      this.loading = true
      const chooseCourse = this.$store.state.courses.chooseCourses;
      if (!chooseCourse?.length) return this.loading = false;
      const res = await this.$store.dispatch("stuShow/gStuShowList", {
        userID: this.userInfo.userID,
      });
      this.loading = false
      if (!res?.length) return;
      this.data = chooseCourse.filter((item) => {
        return res.find((ritem) => {
          if (ritem.currNo == item.currNo) {
            item.stuShowData = ritem
            return true
          }
        });
      });
    },
  },
  mounted() {
    this.getIsEditNewState();
  },
};
</script>

<style lang="stylus" scoped>
.outcomesUploadList {
  padding: 23px 0 0 63px;

  .fullCar {
    width: 285px;
    height: 320px;
  }

  .flexBoxComponent {
    height: 100%
  }
}
</style>